<template>
    <div id="app">
        <StarryBackground />
        <div style="height: 80px;"></div>
        <div class="container">
            <div class="intro">
                <div class="logo">
                    <img src="../assets/测盟汇图标.png" alt="">
                </div>
                <div class="textLogo">
                    <el-text class="mx-1"
                        style="font-size:50px;margin-left:120px;color: white;font-weight: 700;">测盟汇</el-text>
                </div>
                <div style="width: 300px;margin: 20px 0 0 50px;">
                    <el-text class="mx-1"
                        style="font-size:small;color: white;font-weight: 700;font-style: italic">测盟汇旨在通过开发一个在线会议管理平台，解决会议组织过程中遇到的各种痛点问题，
                        提高会议组织效率，增强会员单位成员的参与度和满意度。<br />本系统系统旨在优化会议注册流程、整合会议通知和新闻发布、
                        提供在线回放和直播功能，使参会者可以更便捷地获取会议信息和学习优秀会议报告，
                        从而促进会员单位之间的信息交流和知识共享</el-text>
                </div>

            </div>
            <div class="login">
                <h1>登录</h1>
                <el-form class="form" :model="userinfo" :rules="rules" ref="ruleForm" label-width="130px">
                    <el-form-item label="用户名" prop="name">
                        <el-input v-model="userinfo.name" style="width: 220px"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="pwd">
                        <el-input v-model="userinfo.pwd" style="width: 220px" type="password"
                            placeholder="Please input password" show-password />
                    </el-form-item>
                    <el-form-item label="请输入验证码" prop="verificationCode">
                        <el-input v-model="userinfo.verificationCode" style="width: 130px" type="password"
                            placeholder="请输入验证码" show-password />
                        <img :src="validImage.verifyCodeImgUrl" alt="验证码显示错误" style="height: 30px;width: 50px;margin-left:20px" @click="changeValid()">
                    </el-form-item>
                    <el-form-item class="btnGroup">
                        <el-button type="primary" @click="login">提交</el-button>
                        <el-button @click="signUp">注册</el-button>
                    </el-form-item>
                </el-form>

                <div class="supportProm">
                    <div class="line"></div>
                    <el-text class="mx-1" type="info">合作伙伴</el-text>
                    <div class="line"></div>
                </div>
                <div class="cooperations">
                    <img src="../assets/赞助图标1.png" alt="">
                    <img src="../assets/赞助图标2.png" alt="">
                    <img src="../assets/赞助图标3.png" alt="">
                    <img src="../assets/赞助图标4.png" alt="">
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" >
import { ref, reactive, onBeforeMount } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { ElMessage, FormInstance, ElMessageBox } from 'element-plus';
import StarryBackground from './StarryBackground.vue'; // 导入星空背景组件
import { useTokenStore } from '../store/token.ts'
const tokenStore = useTokenStore()
let router = useRouter()
import request from '../until/request.ts';

const ruleForm = ref<FormInstance>()

// let rules = reactive({})

let userinfo = reactive({
    name: '',
    pwd: '',
    verificationCode: ''
})

let validImage = reactive({
    verifyCode: '',
    verifyCodeImgUrl: '',
});

const rules = {
    name: [
        { required: true, message: '请输入名称', trigger: 'blur' }
    ],
    pwd: [
        { required: true, message: '请输入密码', trigger: 'blur' }
    ]
};

onBeforeMount(async () => {
    const response = await axios.post('https://www.mxnzp.com/api/verifycode/code?len=6&type=0&app_id=nmkainjrorqwvwta&app_secret=eorEMPKQ3lJooVAhuU8rOoWcky6ubeDz')
    validImage.verifyCode = response.data.data.verifyCode;
    validImage.verifyCodeImgUrl = response.data.data.verifyCodeImgUrl;
});

const open = (message: string) => {
    ElMessageBox.alert(message, '登录提示', {
        confirmButtonText: '确定',
        // callback: (action: string) => {
        //     ElMessage({
        //         type: 'info',
        //         message: `action: ${action}`
        //     });
        // }
    });
}

const login = async () => {

    if (ruleForm.value) {
        ruleForm.value.validate(async (valid: any) => {
            if (valid && (userinfo.verificationCode == validImage.verifyCode)) {
                try {
                    let fd = new FormData();
                    fd.append('name', userinfo.name);
                    fd.append('pwd', userinfo.pwd);
                    const response = await request.post('/user/login', fd)
                    
                    if (response.data.code == 0||response.data.isOk===true) {
                        //将token存储到本地
                        tokenStore.setToken(response.data.data)
                        ElMessage.success('登录成功');
                        setTimeout(() => {
                            router.push('/home');
                        }, 1000);
                       
                    }
                    else {
                        open(response.data.msg);
                    }

                } catch (error) {
                    console.error('Login failed:', error)
                    // 可以在这里添加错误处理，例如显示错误消息给用户
                }

            } else {
                ElMessage({
                    message: '请提交正确的用户名、密码以及验证码!',
                    type: 'error',
                });
                return false;
            }
        });
    }
}

const signUp = () => {
    router.push('/signup')
}

const changeValid = async ()=> {
    const response = await axios.post('https://www.mxnzp.com/api/verifycode/code?len=6&type=0&app_id=nmkainjrorqwvwta&app_secret=eorEMPKQ3lJooVAhuU8rOoWcky6ubeDz')
    validImage.verifyCode = response.data.data.verifyCode;
    validImage.verifyCodeImgUrl = response.data.data.verifyCodeImgUrl;
}
</script>

<style scoped>
.container {
    display: flex;
    justify-content: center;
    height: 600px;
    width: 100%;
    border-color: rgb(218, 218, 218);
}

.intro {
    width: 425px;
    height: 500px;
    border: 1px rgb(192, 190, 190) solid;
    box-shadow: 5px -20px 20px -4px #a7a4a4;
    background-color: rgb(71, 86, 106);
}

.intro img {
    margin: 40px 0 0 10px;
    width: 150px;
    height: 150px;
}

.logo {
    background-color: rgb(71, 86, 106);
    margin: 50px 110px;
}

.textLogo {
    margin-top: 85px
}

.login {
    width: 425px;
    height: 450px;
    padding-top: 50px;
    text-align: center;
    border: 1px rgb(192, 190, 190) solid;
    box-shadow: 30px -20px 20px -4px #a7a4a4;

}

.form {
    padding-top: 30px;
}

.btnGroup {
    padding: 20px 0 0 25px;
    display: flex;
    justify-content: center;
}

.supportProm {
    display: flex;
    justify-content: center;
    margin-top: 40px
}

.line {
    margin: 8px 5px 0 5px;
    height: 5px;
    width: 100px;
    border-top: 1px solid gray;
}

.cooperations {
    display: flex;
    justify-content: center;
}

.cooperations img {
    width: 40px;
    height: 40px;
    margin: 8px 10px;
}

#container {
    height: 500px;
    width: 500px;
}
</style>
